<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts';
  require('echarts/theme/macarons'); // echarts 主题
  const animationDuration = 3000;
  import { countInfo } from 'api/dashboard'
  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '400px'
      }
    },
    data() {
      return {
        chart: null,
        time: [],
        data1: [],
        data2: [],
        data3: [],
        data4: [],
        data5: [],
        data6: [],
        data7: []
      };
    },
    mounted() {
      this.initChart();
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
        countInfo()
        .then(res => {
          res.data.forEach(item => {
            item.crt_time = item.crt_time.replace(/\s[\x00-\xff]*/g,'')// 匹配双字节字符
            this.time.push(item.crt_time)
            this.data1.push(item.registerAndNoCommitCount)
            this.data2.push(item.rejectCount)
            this.data3.push(item.registerCount)
            this.data4.push(item.userApplyCount)
            this.data5.push(item.loanCount)
            this.data6.push(item.firstCheckPassCount)
            this.data7.push(item.getEnginePassCount)
          })
          this.chart.setOption({
            color: ['#f2ad86', '#8ecac8', '#88cbf5', '#93c7a3', '#f8ec80', '#7896f8', '#ec6a6a'],
            tooltip: {
              trigger: 'axis',
              axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            legend: {
              data: [this.$t('dashboard.data1'), this.$t('dashboard.data2'), this.$t('dashboard.data3'), this.$t('dashboard.data4'), this.$t('dashboard.data5'), this.$t('dashboard.data6'), this.$t('dashboard.data7')]
            },
            calculable: true,
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [{
              type: 'category',
              data: this.time,
              axisTick: {
                alignWithLabel: true
              }
            }],
            yAxis: [{
              type: 'value',
              name: '单数（笔）',
              nameTextStyle: {
                fontSize: 16
              }
            }],
            series: [{
              name: this.$t('dashboard.data1'),
              type: 'bar',
              data: this.data1,
              animationDuration
            }, {
              name: this.$t('dashboard.data2'),
              type: 'bar',
              data: this.data2,
              animationDuration
            }, {
              name: this.$t('dashboard.data3'),
              type: 'bar',
              data: this.data3,
              animationDuration
            }, {
              name: this.$t('dashboard.data4'),
              type: 'bar',
              data: this.data4,
              animationDuration
            }, {
              name: this.$t('dashboard.data5'),
              type: 'bar',
              data: this.data5,
              animationDuration
            }, {
              name: this.$t('dashboard.data6'),
              type: 'bar',
              data: this.data6,
              animationDuration
            }, {
              name: this.$t('dashboard.data7'),
              type: 'bar',
              data: this.data7,
              animationDuration
            }]
          })
        })
      }
    }
}
</script>